<template>
	<view class="column h100">
		<view class="scrolly flex-1">
			<view class="mt8 relative">
				<u-swiper :list="swipers" radius="0rpx" height="483rpx"></u-swiper>
				<view class="tag" @click="savePhotos(swipers)">
					<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/img-ic.png" width="30rpx"
						height="28rpx"></u-image>
					<text class="ml10">一键下载图片</text>
				</view>
			</view>
			<view class="info">
				<view class="title zoom-in1">比亚迪 宋PLUS新能源 2025款 EV 605kn 旗舰版</view>
				<view class="">
					<view class="justify-between pt24 zoom-in2">
						<view class="justify-start align-center">
							<view>
								<text class="name">最高出价：</text>
								<text class="value-black">19.7万元</text>
							</view>
							<view class="center ml17">
								<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/loc-ic.png" width="18rpx"
									height="23rpx"></u-image>
								<text class="base-color fs26 ml6">重庆市</text>
							</view>
						</view>

						<view class="justify-end">
							<text class="name">发布时间：</text>
							<text class="name">2025.04.10</text>
						</view>
					</view>
					<view class="justify-start pt26 zoom-in3">
						<view class="name">车况描述：</view>
						<view class="value-black flex-1">
							2024年12月上牌，比亚迪 宋PLUS新能源 2025款 EV 605kn 全款个人一手行驶6300公里
						</view>
					</view>
				</view>
				<view class="mt23">
					<view class="grid-box zoom-in4">
						<u-grid :border="true" :col="4">
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">上牌时间</text>
									<text class="value">2024-12</text>
								</view>
							</u-grid-item>
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">真实公里</text>
									<text class="value">0.6万公里</text>
								</view>
							</u-grid-item>
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">车辆颜色</text>
									<text class="value">黑色</text>
								</view>
							</u-grid-item>
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">过户次数</text>
									<text class="value">1</text>
								</view>
							</u-grid-item>
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">新车指导价</text>
									<text class="value">19.6万元</text>
								</view>
							</u-grid-item>
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">能源类型</text>
									<text class="value">汽油</text>
								</view>
							</u-grid-item>
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">排量</text>
									<text class="value">2.0T</text>
								</view>
							</u-grid-item>
							<u-grid-item :customStyle="gridBorder">
								<view class="grid-item">
									<text class="label">变速箱</text>
									<text class="value">自动</text>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
			<view class="comments">
				<template v-for="(item, index) in 3" :key="item">
					<view :class="['cmt-item', `zoom${index}`]" @click="onComment">
						<u-avatar src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg"
							size="86rpx"></u-avatar>
						<view class="right">
							<view class="top">
								<text class="name">张三</text>
								<text class="time">刚刚</text>
							</view>
							<view class="bottom">参考价： 9.02万元</view>
						</view>
					</view>
					<u-line margin="30rpx 0 33rpx" v-if="item < 3" color="#EBEBEB"></u-line>
				</template>
				<view class="pt24 color6 fs22 text-center center gap18">
					<text>查看剩余两条评论</text>
					<u-icon name="arrow-down" size="18rpx"></u-icon>
				</view>
			</view>
			<view class="car-host">
				<u-avatar src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg"
					size="82rpx"></u-avatar>
				<view class="right">
					<view class="title">重庆二手车主黄生</view>
					<view class="mt7 justify-start">
						<view class="addr">
							<u-icon name="map" size="23rpx" color="#5b5b5b"></u-icon>
							<text>重庆市</text>
						</view>
						<view class="time">12小时前</view>
					</view>
				</view>
			</view>
		</view>

		<view class="buts">
			<u-button type="primary" text="关闭询价" :customStyle="{height: '80rpx',borderRadius:'15rpx'}" />
		</view>

		<view class="conments" v-if="openComments">
			<view class="box">
				<input type="text" class="fs26 flex-1" placeholder="@重庆二手车主黄生" placeholder-class="holder" />
				<view class="send">发送</view>
			</view>
			<view class="absolute" style="top: 5rpx;right: 5rpx;" @click="openComments=false">
				<u-icon name="close" size="30rpx"></u-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		cellPhone,
		navTo,
		savePhotos
	} from '@/core/app';


	/* 评论 */
	const openComments = ref(false)

	function onComment() {
		openComments.value = true;
	}

	/* grid边框颜色 */
	const gridBorder = {
		borderColor: '#EBEBEB !important'
	};

	/* 轮播图 */
	const swipers = ref([
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg',
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/202505241204131.jpg',
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/202505241204133.jpg',
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/202505241204137.jpg',
		'https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/202505241204146.jpg'
	]);
</script>

<style scoped lang="scss">
	.info {
		padding: 24rpx 25rpx 28rpx;
		box-sizing: border-box;
		background-color: #fff;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
		}

		.name {
			font-weight: 400;
			font-size: 26rpx;
			color: #797979;
		}

		.value-black {
			font-weight: 400;
			font-size: 26rpx;
			color: #000000;
		}
	}

	.grid-box {
		padding: 33rpx;
		box-sizing: border-box;
		background-color: #f4f5f9;
		border-radius: 20rpx;

		.grid-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 150rpx;

			// :deep(.u-border-right){
			// 	border-color: #EBEBEB !important;
			// }
			// :deep(.u-border-bottom){
			// 	border-color: #EBEBEB !important;
			// }

			.label {
				font-weight: 400;
				font-size: 26rpx;
				color: #797979;
			}

			.value {
				margin-top: 8rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
			}
		}
	}

	.comments {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 20rpx;

		.cmt-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.right {
				margin-left: 19rpx;
				flex: 1;

				.top {
					display: flex;
					justify-content: space-between;
					align-content: center;
					width: 100%;

					.name {
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
					}

					.time {
						font-weight: 400;
						font-size: 26rpx;
						color: #797979;
					}
				}

				.bottom {
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					margin-top: 7rpx;

					.name {
						color: #0759bb;
					}
				}
			}
		}
	}

	.buts {
		padding: 40rpx 30rpx 32rpx;
		box-sizing: border-box;
		gap: 16rpx;
		display: flex;

		.but {
			flex: 1;
			height: 80rpx;
			border-radius: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 12rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
		}

		.but-ctct {
			background: #53c75b;
		}

		.but-secret {
			background: #f65812;
		}

		.but-price {
			background: #4dc4ec;
		}

		.but-give {
			background: #3e81d1;
		}
	}

	.tag {
		position: absolute;
		top: 21rpx;
		right: 27rpx;
		width: 203rpx;
		height: 42rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 10rpx;
		padding: 4rpx 7rpx 4rpx 12rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.car-host {
		padding: 23rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-start;
		margin-top: 20rpx;

		.right {
			flex: 1;
			margin-left: 10rpx;

			.title {
				font-weight: bold;
				font-size: 26rpx;
				color: #000000;
			}

			.addr {
				font-weight: 400;
				font-size: 26rpx;
				color: #5B5B5B;
				display: flex;
				justify-content: flex-start;
			}

			.time {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-left: 20rpx;
			}
		}
	}

	.conments {
		width: 100%;
		height: 158rpx;
		background: #FFFFFF;
		padding: 36rpx 31rpx 42rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		z-index: 2;
		animation: show .3s;

		.box {
			width: 688rpx;
			height: 80rpx;
			background: #F2F2F2;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 12rpx 13rpx 12rpx 18rpx;
			box-sizing: border-box;

			.holder {
				font-weight: 400;
				font-size: 26rpx;
				color: #999999;
			}

			.send {
				width: 112rpx;
				height: 56rpx;
				background: #3E81D1;
				border-radius: 15rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				text-align: center;
			}
		}
	}

	@keyframes show {
		0% {
			opacity: 0;
			transform: translateY(100%);
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>